@import "./mixins/index";
@import "element";

.main-layout, .ee-layout {
  @include page-main-view;
}

.learn-layout {
  @include page-learn-view;
}

.card {
  @include card-view;
}

.card-title {
  font-size: 20px;
  margin-bottom: 20px;
}

.img-box {
  @include img-box;
}

.img-box-gallery {
  @include img-box-gallery;
}

.flex-box {
  display: flex;

  .left-main {
    flex: 1;
  }

  .right-side {
    flex-basis: 300px;
    margin-left: 20px;
  }
}

.view-box {
  padding: 10px;
  border-radius: 10px;
  background: #f0f0f0;
}

.price-now {
  font-size: 20px;
  font-weight: bolder;
  @include l12-text;
}

.price-before {
  font-size: 14px;
  @include l23-text;
}

.post-text {
  box-sizing: border-box;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #eaeaea;
  padding: 10px;
  margin-bottom: 10px;

  outline-color: #357FF8;
  resize: none;
}

.primary-btn {
  cursor: pointer;
  text-align: center;
  width: 120px;
  line-height: 35px;
  color: white;
  background: #357ff8;
  border-radius: 20px;
  transition: 0.3s;

  &:hover {
    transition: 0.3s;
    background: #2a74eb;
  }
}

